<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/commons/taglibs.jsp" %>
<!DOCTYPE>
<html>
  <head>
  <title>用户消息完善</title>
  </head>
  <body　class="container">
 	<form class="form-horizontal" role="form" action="${ctx}/userInfo/save"　method="post" id="form">
	  <div class="form-group  form-inline">
	    <label class="col-md-4 control-label">头像：</label>
	    <div class="col-md-4">
	    <input type="hidden" name="x"/>
	    <input type="hidden" name="y"/>
	    <input type="hidden" name="w"/>
	    <input type="hidden" name="h"/>
	     <input id="filemanager">
	    </div>
	  </div>
	  <div class="form-group">
	   	<div class="col-md-8 text-right">
	  		<input type="submit" class="btn btn-primary" value="保存"></input>
	  	</div>
	  </div>
	</form>
	<link rel="stylesheet" href="${ctx}/static/js/uploadify/uploadify.css" type="text/css">
	<script type="text/javascript" src="${ctx}/static/js/uploadify/jquery.uploadify.min.js"></script>
	<link rel="stylesheet" href="${ctx}/static/js/Jcrop/css/jquery.Jcrop.css" type="text/css">
	<script type="text/javascript" src="${ctx}/static/js/Jcrop/js/jquery.Jcrop.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#form").Validform({
			tiptype:4
			})
			
		var url = '${ctx}/uploadify.do?name=userHead';
		$("#filemanager").uploadify({
           'swf'       	 : '${ctx}/static/js/uploadify/uploadify.swf',
           'uploader'       : url,//后台处理的请求
            'fileTypeDesc' : '文件' , //出现在上传对话框中的文件类型描述
			'fileTypeExts' : '*.jpg;*.bmp;*.png;*.gif', //控制可上传文件的扩展名，启用本项时需同时声明filedesc

           'multi'          : false,
           'buttonText'     : '上传',
           
           onUploadSuccess:function(file, data, response){
				var imgId = "headImg_"+new Date().getTime();
		        $("#filemanager").after("<input type='hidden' name='headImg' value='/upload/userHead/"+file.name+"'>")
		        .after('<img id='+imgId+' src="${ctx}/upload/userHead/'+file.name+'"/>');
		        
		         //同时启动裁剪操作，触发裁剪框显示，让用户选择图片区域
		        initJcrop($("#"+imgId));
           },
           onUploadError:function(file, errorCode, errorMsg) {
        	   alert("上传失败,file="+file.name);   
           }
	 	});
	 	var jcrop_api;
	 	
	 	function initJcrop(dom){
	 		$(dom).Jcrop({
                bgColor: 'black',
                allowSelect:false,//允许新选框
                allowResize:false, //允许选框缩放
                bgOpacity: .4,
                setSelect: [0, 0, 150,150],  //设定4个角的初始位置
                //aspectRatio: 1 / 1, 等比　width/height
               // onChange: showCoords,   //当裁剪框变动时执行的函数
                onSelect: showCoords   //当选择完成时执行的函数
            },function(){
                jcrop_api = this;
                });
		 	}
	 	function showCoords(c){
	 		$("input[name=x]").val(c.x);
	 		$("input[name=y]").val(c.y);
	 		$("input[name=h]").val(c.h);
	 		$("input[name=w]").val(c.w);
		 	}
		});
	</script>
  </body>
</html>
